<template>
  
  <!-- 管理员 或 攻略管理组 -->
  <template v-if="$cfg.user?.group?.admin == true || $cfg.user?.group?.Introduction == true">
    <!-- 编辑角色数据库 -->
    <component :is="comp.updrole" :val="val" mdname="md_updrole"/>
  </template>
  <!-- 管理员组件 -->
  <template v-if="$cfg.user?.group?.admin == true">
    <component :is="comp.tomddr" :text="val.text" :comp="comp.review_adg" :ct="ct" :val="val" mdname="md_review"/>
  </template>

  <template v-if="$cfg.mobile">
    <n-card
      style="min-height: 100vh"
      class="work_drawer"
      content-style="padding-top:1rem;"
    >
    <n-space>
      <n-button type="warning" @click="ct.ap_adg()" v-if="$cfg.user?.group?.Introduction != true">申请攻略管理组</n-button>
      <n-button type="warning" @click="ct.upd_role()" v-if="$cfg.user?.group?.Introduction == true|| $cfg.user?.group?.admin == true">编辑角色数据库</n-button>
      <n-button type="warning" @click="val.md_review = true" v-if="$cfg.user?.group?.admin == true">审核管理组</n-button>
    </n-space>
      <n-hr />
      <!-- 申请攻略组组件 -->
      <div class="adg_hover_div" v-if="val.md_adg == true">
        <n-spin :show="val.md_adg_loading">
          <component :is="comp.ap_adg" :val="val" :ct="ct" :loading="val.md_adg_loading"/>
        </n-spin>
      </div>
      <p>■ 攻略组列表</p>
      <template v-for="item in val.adg_arr">
        <p>
          <span style="color: #92ca80">◇ {{ item.username }}　</span>
          <n-space style="margin-top: 5px">
            <span style="padding-left: 5px"></span>
            <template v-for="(item2, key2) in item.group">
              <el-tag class="el-tag--work_ycz" v-if="item2 == true">{{
                $cfg.qxname[key2]
              }}</el-tag>
            </template>
          </n-space>
        </p>
        <n-hr />
      </template>
    </n-card>
  </template>
  <template v-else>
  
    <n-space>
      <n-button type="warning" @click="ct.ap_adg()" v-if="$cfg.user?.group?.Introduction != true">申请攻略管理组</n-button>
      <n-button type="warning" @click="ct.upd_role()" v-if="$cfg.user?.group?.Introduction == true|| $cfg.user?.group?.admin == true">编辑角色数据库</n-button>
      <n-button type="warning" @click="val.md_review = true" v-if="$cfg.user?.group?.admin == true">审核管理组</n-button>
    </n-space>
    <n-hr />

    <!-- 申请攻略组组件 -->
    <div class="adg_hover_div" v-if="val.md_adg == true">
        <n-spin :show="val.md_adg_loading">
          <component :is="comp.ap_adg" :val="val" :ct="ct"/>
        </n-spin>
      </div>

    <div class="workbg">
      <n-h3>坎公区攻略管理组列表</n-h3>
      <template v-for="item in val.adg_arr">
        <p>
        <div style="    padding-bottom: 8px;">
          <span class="gtadg_tx">{{ item.username }}　</span><span>uid({{ item.uid }})</span>
          </div>
          <n-space>
            <template v-for="(item2, key2) in item.group">
              <el-tag class="el-tag--work_ycz" v-if="item2 == true">{{
                $cfg.qxname[key2]
              }}</el-tag>
            </template>
          </n-space>
        </p>
        <n-hr />
      </template>
    </div>
  </template>
</template>


<script>
import axios from "axios";
export default defineComponent({
  mounted() {
    this.ct.get_adg();
  },
  setup() {
    const comp = {
      //ap_adg: defineAsyncComponent(() => import("./admin_group/ap_adg.vue")),
      //updrole: defineAsyncComponent(() => import("@/views/gt/comp/updrole.vue")),
      tomddr : defineAsyncComponent(() => import("@/views/gt/comp/tongyong/to_mddr.vue")),
      review_adg: defineAsyncComponent(() => import("@/views/gt/comp/introduction/review_adg.vue")),
    };
   
    return {
      comp,
    };
  },
  data() {
    let val = reactive({
      text : {
        title : "审核管理组",
      },
      md_adg: false,
      md_adg_loading : false,
      md_updrole : false,
      md_review : false,
      md_review_adg : false,
      qs: {
        name: null,
        qq: null,
      },
      labelstyle: "color:var(--base-font-hover-color);font-size:13px;",
    });
    let ct = reactive({
      ap_adg: () => {
        val.md_adg = true;
        val.md_adg_loading = true;
      },
      upd_role : () => {
        val.md_updrole = true;
      },
      get_adg: () => {
        axios
          .get(`${this.$cfg.url}`, {
            params: {
              t: "get/Introduction/get_adg",
            },
          })
          .then((res) => {
            const data = res.data;
            val.adg_arr = data.data;
          })
          .catch((err) => {
            alert(err);
          });
      },
    });

    return { ct, val };
  },
  watch: {
    "$cfg.user": {
      handler(newVal) {
       this.val.qs.uid = newVal?.uid ?? null;
       this.val.qs.username = newVal?.username ?? null;
      },
      immediate: true,
      deep: true,
    },
  },
});
</script>
